<template>
  <div class="index-container">
    <el-row :gutter="30">
      <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
        <el-card shadow="hover">
          <div slot="header" class="title clearfix">
            <h3 class="fl">2020年上半年体检服务人数统计</h3>
            <el-dropdown class="fr" @command="handleCommand">
              <span class="el-dropdown-link">
                今天
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="a">上半年</el-dropdown-item>
                <el-dropdown-item command="b">下半年</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <div>
            <vab-chart
              ref="chart1"
              autoresize
              :options="chart1"
              style="width: 100%; height: 360px;"
            />
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
        <el-card shadow="hover">
          <div slot="header" class="title">
            2020年上半年体检老人年龄数据统计
          </div>
          <div>
            <vab-chart
              autoresize
              :options="chart2"
              style="width: 100%; height: 360px;"
            />
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
        <el-card shadow="hover">
          <div slot="header" class="title">体检服务数据占比</div>
          <div>
            <vab-chart
              autoresize
              :options="chart3"
              style="width: 100%; height: 360px;"
            />
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="30">
      <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
        <el-card shadow="hover">
          <div slot="header" class="title clearfix">
            <h3 class="fl">体检服务老人类别占比</h3>
            <el-dropdown class="fr" @command="handleCommand">
              <span class="el-dropdown-link">
                今天
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="a">今天</el-dropdown-item>
                <el-dropdown-item command="b">七天</el-dropdown-item>
                <el-dropdown-item command="c">一个月</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <div>
            <vab-chart
              autoresize
              :options="chart4"
              style="width: 100%; height: 360px;"
            />
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
        <el-card shadow="hover">
          <div slot="header" class="title clearfix">
            <h3 class="fl">上门服务内容占比</h3>
            <el-dropdown class="fr" @command="handleCommand">
              <span class="el-dropdown-link">
                今天
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="a">今天</el-dropdown-item>
                <el-dropdown-item command="b">七天</el-dropdown-item>
                <el-dropdown-item command="c">一个月</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <div>
            <vab-chart
              autoresize
              :options="chart5"
              style="width: 100%; height: 360px;"
            />
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
        <el-card shadow="hover">
          <div slot="header" class="title">服务老人类别统计</div>
          <div>
            <vab-chart
              autoresize
              :options="chart6"
              style="width: 100%; height: 360px;"
            />
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import * as echarts from "echarts";
  import VabChart from "@/plugins/echarts";
  export default {
    name: "Index",
    components: { VabChart },
    data() {
      return {
        chart1: {
          grid: {
            top: "25%",
            bottom: "10%",
            left: "7%",
            right: "2%",
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
              label: {
                show: true,
                color: "#001e44",
              },
            },
          },
          xAxis: {
            data: ["1月", "2月", "3月", "4月", "5月", "6月"],
            axisLine: {
              show: true, //隐藏X轴轴线
              lineStyle: {
                color: "#fff",
              },
            },
            axisTick: {
              show: true, //隐藏X轴刻度
            },
            axisLabel: {
              show: true,
            },
          },
          yAxis: [
            {
              type: "value",
              name: "人",
              splitLine: {
                show: false,
              },
              axisTick: {
                show: true,
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: "#fff",
                },
              },
              axisLabel: {
                show: true,
              },
            },
          ],
          series: [
            {
              name: "人数",
              type: "bar",
              barWidth: 32,
              itemStyle: {
                color: "#1791FF",
              },
              data: [87, 100, 160, 400, 400, 650],
            },
          ],
        },
        chart2: {
          grid: {
            top: "25%",
            bottom: "10%",
            left: "7%",
            right: "2%",
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
              label: {
                show: true,
                color: "#001e44",
              },
            },
          },
          xAxis: {
            data: ["65岁", "70岁", "75岁", "80岁", "85岁", "90岁及以上"],
            axisLine: {
              show: true, //隐藏X轴轴线
              lineStyle: {
                color: "#fff",
              },
            },
            axisTick: {
              show: true, //隐藏X轴刻度
            },
            axisLabel: {
              show: true,
            },
          },
          yAxis: [
            {
              type: "value",
              name: "人",
              splitLine: {
                show: false,
              },
              axisTick: {
                show: true,
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: "#fff",
                },
              },
              axisLabel: {
                show: true,
              },
            },
          ],
          series: [
            {
              name: "人数",
              type: "bar",
              barWidth: 32,
              itemStyle: {
                normal: {
                  //好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
                  color: function (params) {
                    // build a color map as your need.
                    var colorList = [
                      "#38CBCB",
                      "#4DCC73",
                      "#1791FF",
                      "#FCD438",
                      "#EA82F1",
                    ];
                    return colorList[params.dataIndex];
                  }, //以下为是否显示，显示位置和显示格式的设置了
                  label: {
                    show: true,
                    position: "top",
                    //                             formatter: '{c}'
                    formatter: "{c}",
                  },
                },
              },
              data: [87, 100, 160, 400, 400, 30],
            },
          ],
        },
        chart3: {
          grid: {
            top: "25%",
            bottom: "10%",
            left: "7%",
            right: "2%",
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
              label: {
                show: true,
              },
            },
          },
          legend: {
            //图例
            orient: "vertical", //图例的布局，竖直    horizontal为水平
            x: "left", //图例显示在右边
            itemGap: 32, // 设置间距
            icon: "circle",
            itemWidth: 16,
            itemHeight: 16,
            data: [
              "心电图筛查",
              "B超筛查",
              "血糖检测",
              "血压检测",
              "指氧饱和度",
              "其他",
            ],
            textStyle: {
              //图例文字的样式
              color: "#fff", //文字颜色
              fontSize: 16, //文字大小
            },
          },
          series: [
            {
              name: "占比",
              type: "pie", //环形图的type和饼图相同
              radius: ["55%", "85%"], //饼图的半径，第一个为内半径，第二个为外半径
              center: ["60%", "50%"],
              avoidLabelOverlap: false,
              color: ["#1791FF", "#FF8183", "#4DCC73", "#FCD438"],
              label: {
                normal: {
                  //正常的样式
                  position: "inner",
                  show: true,
                  formatter: "{b} \n {c} ({d}%)",
                },
                emphasis: {
                  // 选中时候的样式
                  show: true,
                  textStyle: {
                    fontSize: "16",
                    fontWeight: "bold",
                  },
                },
              }, //提示文字
              labelLine: {
                normal: {
                  show: true,
                },
              },
              data: [
                { value: 335, name: "心电图筛查" },
                { value: 310, name: "B超筛查" },
                { value: 234, name: "血糖检测" },
                { value: 135, name: "血压检测" },
                { value: 135, name: "指氧饱和度" },
                { value: 135, name: "其他" },
              ],
            },
          ],
        },
        chart4: {
          grid: {
            top: "25%",
            bottom: "10%",
            left: "7%",
            right: "2%",
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
              label: {
                show: true,
                color: "#001e44",
              },
            },
          },
          xAxis: {
            data: ["贫困老人", "孤寡老人", "失独老人", "失能老人"],
            axisLine: {
              show: true, //隐藏X轴轴线
              lineStyle: {
                color: "#fff",
              },
            },
            axisTick: {
              show: true, //隐藏X轴刻度
            },
            axisLabel: {
              show: true,
            },
          },
          yAxis: [
            {
              type: "value",
              name: "人",
              splitLine: {
                show: false,
              },
              axisTick: {
                show: true,
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: "#fff",
                },
              },
              axisLabel: {
                show: true,
              },
            },
          ],
          series: [
            {
              name: "人数",
              type: "bar",
              barWidth: 60,
              itemStyle: {
                normal: {
                  //好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
                  color: function (params) {
                    // build a color map as your need.
                    var colorList = [
                      "#1791FF",
                      "#57CA6E",
                      "#38CBCB",
                      "#FCD438",
                    ];
                    return colorList[params.dataIndex];
                  }, //以下为是否显示，显示位置和显示格式的设置了
                  label: {
                    show: true,
                    position: "top",
                    //                             formatter: '{c}'
                    formatter: "{c}",
                  },
                },
              },
              data: [87, 100, 160, 400, 400],
            },
          ],
        },
        chart5: {
          grid: {
            top: "25%",
            bottom: "10%",
            left: "7%",
            right: "2%",
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
              label: {
                show: true,
              },
            },
          },
          legend: {
            //图例
            orient: "vertical", //图例的布局，竖直    horizontal为水平
            x: "left", //图例显示在右边
            itemGap: 32, // 设置间距
            icon: "circle",
            itemWidth: 16,
            itemHeight: 16,
            data: ["照料护理", "卫生保洁", "改造维修", "生活配送", "出门陪护"],
            textStyle: {
              //图例文字的样式
              color: "#fff", //文字颜色
              fontSize: 16, //文字大小
            },
          },
          series: [
            {
              name: "内容占比",
              type: "pie", //环形图的type和饼图相同
              radius: ["55%", "85%"], //饼图的半径，第一个为内半径，第二个为外半径
              center: ["60%", "50%"],
              avoidLabelOverlap: false,
              color: ["#1791FF", "#FF8183", "#4DCC73", "#FCD438"],
              label: {
                normal: {
                  //正常的样式
                  position: "inner",
                  show: true,
                  formatter: "{b} \n {c} ({d}%)",
                },
                emphasis: {
                  // 选中时候的样式
                  show: true,
                  textStyle: {
                    fontSize: "16",
                    fontWeight: "bold",
                  },
                },
              }, //提示文字
              labelLine: {
                normal: {
                  show: true,
                },
              },
              data: [
                { value: 335, name: "照料护理" },
                { value: 310, name: "卫生保洁" },
                { value: 234, name: "改造维修" },
                { value: 135, name: "生活配送" },
                { value: 135, name: "出门陪护" },
              ],
            },
          ],
        },
        chart6: {
          grid: {
            top: "25%",
            bottom: "10%",
            left: "7%",
            right: "2%",
          },
          tooltip: {
            show: true,
            formatter: "{b} : {c}小时",
          },
          legend: {
            //图例
            orient: "vertical", //图例的布局 vertical，竖直    horizontal为水平
            x: "left", //图例显示在右边
            itemGap: 32, // 设置间距
            icon: "circle",
            itemWidth: 16,
            itemHeight: 16,
            data: ["孤寡老人", "高领老人", "五保老人", "空巢老人", "失独老人"],
            textStyle: {
              //图例文字的样式
              color: "#fff", //文字颜色
              fontSize: 16, //文字大小
            },
          },
          series: [
            {
              name: "Line 5",
              type: "pie",
              clockWise: true,
              hoverAnimation: false,
              radius: ["80%", "90%"],
              center: ["60%", "50%"],
              color: "#1791FF",
              itemStyle: {
                normal: {
                  label: {
                    show: false,
                  },
                  labelLine: {
                    show: false,
                  },
                  // shadowBlur: 15,
                  // shadowColor: 'white',
                },
              },
              data: [
                {
                  value: 7645434,
                  name: "孤寡老人",
                },
                {
                  value: 3612343,
                  name: "总数",
                  tooltip: {
                    show: false,
                  },
                  itemStyle: {
                    normal: {
                      color: "rgba(0,0,0,0)",
                      label: {
                        show: false,
                      },
                      labelLine: {
                        show: false,
                      },
                    },
                    emphasis: {
                      color: "rgba(0,0,0,0)",
                    },
                  },
                },
              ],
            },
            {
              name: "Line 4",
              type: "pie",
              clockWise: true,
              radius: ["65%", "75%"],
              center: ["60%", "50%"],
              color: "#FF787F",
              itemStyle: {
                normal: {
                  label: {
                    show: false,
                  },
                  labelLine: {
                    show: false,
                  },
                  // shadowBlur: 15,
                  // shadowColor: 'white',
                },
              },
              hoverAnimation: false,

              data: [
                {
                  value: 2632321,
                  name: "高领老人",
                },
                {
                  value: 2212343,
                  name: "总数",
                  tooltip: {
                    show: false,
                  },
                  itemStyle: {
                    normal: {
                      color: "rgba(0,0,0,0)",
                      label: {
                        show: false,
                      },
                      labelLine: {
                        show: false,
                      },
                    },
                    emphasis: {
                      color: "rgba(0,0,0,0)",
                    },
                  },
                },
              ],
            },
            {
              name: "Line 3",
              type: "pie",
              clockWise: true,
              hoverAnimation: false,
              radius: ["50%", "60%"],
              center: ["60%", "50%"],
              color: "#4DCC73",
              itemStyle: {
                normal: {
                  label: {
                    show: false,
                  },
                  labelLine: {
                    show: false,
                  },
                  // shadowBlur: 15,
                  // shadowColor: 'white',
                },
              },
              data: [
                {
                  value: 1823323,
                  name: "五保老人",
                },
                {
                  value: 1812343,
                  name: "总数",
                  tooltip: {
                    show: false,
                  },
                  itemStyle: {
                    normal: {
                      color: "rgba(0,0,0,0)",
                      label: {
                        show: false,
                      },
                      labelLine: {
                        show: false,
                      },
                    },
                    emphasis: {
                      color: "rgba(0,0,0,0)",
                    },
                  },
                },
              ],
            },
            {
              name: "Line 2",
              type: "pie",
              clockWise: true,
              color: "#FCD438",
              radius: ["35%", "45%"],
              center: ["60%", "50%"],
              itemStyle: {
                normal: {
                  label: {
                    show: false,
                  },
                  labelLine: {
                    show: false,
                  },
                  // shadowBlur: 15,
                  // shadowColor: 'white',
                },
              },
              hoverAnimation: false,

              data: [
                {
                  value: 1342221,
                  name: "空巢老人",
                },
                {
                  value: 1912343,
                  name: "总数",
                  tooltip: {
                    show: false,
                  },
                  itemStyle: {
                    normal: {
                      color: "rgba(0,0,0,0)",
                      label: {
                        show: false,
                      },
                      labelLine: {
                        show: false,
                      },
                    },
                    emphasis: {
                      color: "rgba(0,0,0,0)",
                    },
                  },
                },
              ],
            },
            {
              name: "Line 1",
              type: "pie",
              clockWise: true,
              color: "#38CBCB",
              radius: ["20%", "30%"],
              center: ["60%", "50%"],
              itemStyle: {
                normal: {
                  label: {
                    show: false,
                  },
                  labelLine: {
                    show: false,
                  },
                  // shadowBlur: 15,
                  // shadowColor: 'white',
                },
              },
              hoverAnimation: false,

              data: [
                {
                  value: 1342221,
                  name: "失独老人",
                },
                {
                  value: 1912343,
                  name: "时长",
                  tooltip: {
                    show: false,
                  },
                  itemStyle: {
                    normal: {
                      color: "rgba(0,0,0,0)",
                      label: {
                        show: false,
                      },
                      labelLine: {
                        show: false,
                      },
                    },
                    emphasis: {
                      color: "rgba(0,0,0,0)",
                    },
                  },
                },
              ],
            },
          ],
        },
      };
    },
    created() {},
    beforeDestroy() {},
    mounted() {
      console.log(this.$refs.chart1.chart);
      setTimeout(() => {
        // this.$refs.chart1.chart.setOption()
        this.chart1.series[0].data[0] = 500;
      }, 1000);
      // window.addEventListener("resize", this.$refs.chart1.chart.resize());
    },
    methods: {
      handleCommand(command) {
        this.$message("click on item " + command);
      },
    },
  };
</script>
<style lang="scss" scoped>
  .index-container {
    box-sizing: border-box;
    width: 100%;
    padding: 20px 30px !important;
    margin: 0 !important;
    background: #001e44 !important;

    .el-card {
      background: none;
      background: rgba($color: #00e4ff, $alpha: 0.1);
      border-color: #00e4ff;

      ::v-deep {
        .el-card__header {
          border-bottom: 1px solid #00e4ff;
        }
      }

      .title {
        font-size: 18px;
        color: #fff;
        cursor: pointer;

        h3 {
          font-weight: normal;
        }
      }

      .el-dropdown-link {
        font-size: 16px;
        color: #fff;
      }
    }
  }
</style>
